<template>
	<div>
		<!-- <BaseHeader>
			<template #searchInput>
				<van-search v-model="searchValue" placeholder="请输入搜索关键词" @click="focusSearch" />
			</template>
		</BaseHeader> -->
		<div style="z-index: 100; position: absolute; top: 0; left: 0">
			<van-nav-bar
				title="标题"
				left-text="返回"
				right-text="按钮"
				left-arrow
				placeholder
				:fixed="$store.state.isMobile"
				@click-left="onClickLeft"
			>
				<template #left>
					<div class="avatar" v-if="$store.state.isLogin">
						<img src="@/assets/images/5.png" alt="" width="100%" height="100%" />
					</div>
					<div v-else>登录</div>
				</template>
				<template #title>
					<van-search placeholder="请输入搜索关键词" @click.native="focusSearch" style="flex: 2" />
				</template>
				<template #right>
					<img class="menuItem_Img" src="@/assets/images/菜单.png" alt="" />
				</template>
			</van-nav-bar>
		</div>
		<div style="margin-top: 50px">
			<FoodsNavigationBar :pageList="pageList" />
			<keep-alive v-if="$route.meta.keepAlive">
				<router-view> </router-view>
			</keep-alive>
			<router-view v-if="!$route.meta.keepAlive"> </router-view>
		</div>
	</div>
</template>

<script>
import FoodsNavigationBar from './components/FoodsIndex/FoodsNavigationBar.vue';

import { getMenuList } from '@/api/menu';
export default {
	name: 'FoodsIndex',
	components: {
		// BaseHeader,
		FoodsNavigationBar,
	},
	computed: {
		pageList() {
			return Object.keys(this.FoodsList).splice(2).reverse();
		},
	},
	async created() {
		this.FoodsList = await getMenuList();
	},
	activated() {
		this.$router.push('/');
	},
	data() {
		return {
			FoodsList: [],
		};
	},
	methods: {
		/** @method 点击搜索框  */
		focusSearch() {
			this.$router.push('/FoodsSearch');
		},
		onClickLeft() {
			if (this.$store.state.isLogin) {
				this.$store.commit('changeUserPageShow');
			} else {
				this.$router.push('/userLogin');
			}
		},
	},
};
</script>

<style scoped>
.avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #536069;
	margin-left: 10px;
}
.avatar img {
	border-radius: 50%;
}

.menuItem_Img {
	width: 24px;
	height: 24px;
	vertical-align: middle;
}

.van-search {
	padding: 0;
}
</style>
